<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Markdown Viewer</title>
    <style>
        /* 自定义Markdown内容的样式 */
        .markdown-body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: auto;
            padding: 20px;
            background-color: #f6f6f6;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .markdown-body h1,
        .markdown-body h2,
        .markdown-body h3 {
            color: #333;
        }

        .markdown-body blockquote {
            border-left: 4px solid #ccc;
            padding-left: 15px;
            color: #777;
        }

        .markdown-body pre {
            background-color: #2d2d2d;
            color: #ccc;
            padding: 10px;
            overflow-x: auto;
            border-radius: 3px;
        }

        .markdown-body code {
            background-color: #f9f9f9;
            padding: 2px 4px;
            border-radius: 3px;
        }

        .markdown-body a {
            color: #0645ad;
            text-decoration: none;
        }

        .markdown-body a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div id="content" class="markdown-body"></div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        console.log('marked',marked);
        
        setTimeout(() => {
            const markdownText = `# 这是一个标题 这是一个段落，包含了一个[链接](http://example.com)。 \`\`\`javascript console.log("这是一个代码块"); \`\`\` > 这是一个引用。`;
            document.getElementById('content').innerHTML = marked.parse(markdownText); 
        }, 1000);
    </script>
</body>

</html>